<template>
  <p>count = {{ count }}</p>
  <p>
    <button @click="handleCount">点击+1</button>
  </p>

  <p>smg = {{ smg }}</p>
  <p>
    <button @click="handleSmg">修改内容</button>
  </p>

  <p>userInfo = {{ userInfo }}</p>
  <p>
    <button @click="handleUserInfo">修改信息</button>
    <button @click="handleDeepUserInfo">修改工作信息</button>
  </p>
</template>

<script>
import {ref, watch, reactive} from 'vue'

export default {
  name: "Demo",
  setup() {
    const count = ref(0)
    const smg = ref("你好")

    const userInfo = reactive({
      name: '细孔放',
      age: 10,
      job: {
        work1: {
          name: '咳咳'
        }
      }
    })

    const handleCount = () => {
      count.value += 1
    }

    const handleSmg = () => {
      smg.value += '-'
    }

    const handleUserInfo = () => {
      userInfo.name += '*'
      userInfo.age += 1
    }

    const handleDeepUserInfo = () => {
      userInfo.job.work1.name += '/'
    }

    // 监控 ref 定义的数据
    watch(count, (oldValue, newValue) => {
      console.log(oldValue, newValue);
    })

    // 坚实多个数据，使用数组，oldValue和newValue返回的数据也是对应的数据
    watch([count, smg], (oldValue, newValue) => {
      console.log(oldValue, newValue);
    })

    // 初始化执行immediate，newValue=undefined
    watch(smg, (oldValue, newValue) => {
      console.log("smg 初始化执行---", oldValue, newValue);
    }, {immediate: true})

    // 深度监听，deep属性会强制启用，关闭了也没用
    watch(userInfo, (oldValue, newValue) => {
      console.log("userInfo 深度监听---", oldValue, newValue);
    }, {deep: false})

    // 监听对象属性，定义相同监听，监听会逐个执行
    watch(userInfo.job, (oldValue, newValue) => {
      console.log("userInfo.job 监听", oldValue, newValue);
    })
    watch(userInfo.job, (oldValue, newValue) => {
      console.log("userInfo.job 监听2", oldValue, newValue);
    })

    return {
      count,
      handleCount,
      smg,
      handleSmg,
      userInfo,
      handleUserInfo,
      handleDeepUserInfo
    }
  }
}
</script>

<style scoped>

</style>